<template>
  <div>
    <NavCom
      :list="tabs"
      :active="activeName"
      style="padding-left: 5px"
      @change="handleTabClick"
    >
    </NavCom>
    <div v-show="activeName === 0" style="padding: 10px">
      <el-form
        ref="ruleForm"
        :model="ruleFrom"
        label-position="left"
        label-suffix=":"
      >
        <el-row :gutter="20">
          <el-col
            v-for="(item, index) in column.base"
            :key="index"
            :xs="24"
            :sm="item.col"
            :md="item.col"
            :lg="item.col"
            :xl="item.col"
          >
            <FormComponents :item-obj="item" :form="ruleFrom" :isedit="false">
            </FormComponents>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div v-show="activeName === 1" style="padding: 10px"></div>
  </div>
</template>
<script>
import NavCom from "@/components/Nav/detail.vue";
import FormComponents from "@/components/FormComponents/index.vue";
export default {
  components: { NavCom, FormComponents, },
  props: {
    ruleFrom: {
      type: Object,
      default: () => {
        return {};
      },
    },
    id: {
      type: String | Number,
      default: null,
    },
  },
  data() {
    return {
      tabs: [
        // { label: "入库单信息", active: 0 },
        { label: this.$t('order.insList'), active: 1 },
      ],
      activeName: 1,
    };
  },
  computed: {
    column() {
      const base = [
        { prop: "memberUsername", label: this.$t('customer.name'), type: "input", col: 8 },
        { prop: "receiverName", label: this.$t('order.consignee'), type: "input", col: 8 },
        { prop: "receiverPhone", label: this.$t('order.consigneePhone'), type: "input", col: 8 },
        { prop: "receiverEmail", label: this.$t('order.consigneeEmail'), type: "input", col: 8 },
        { prop: "receiverPostCode", label: this.$t('common.PostalCode'), type: "input", col: 8 },
        { prop: "receiverProvince", label: this.$t('common.province'), type: "input", col: 8 },
        { prop: "receiverCity", label: this.$t('common.city'), type: "input", col: 8 },
        {
          prop: "receiverDetailAddress",
          label: this.$t('order.consigneeAddress'),
          type: "input",
          col: 24,
        },
      ];
      return { base }
    },
  },
  watch: {
    id: {
      handler(v) {},
      immediate: true,
    },
  },
  methods: {
    handleTabClick(v) {
      this.activeName = v.active;
      if (this.activeName === 1) {
        this.getList(this.id);
      }
    },
    getList(v) {
    },
  },
};
</script>
